<template>
  <div>
    <el-input
      v-if="isInput"
      v-model.trim="currentVal"
      :placeholder="placeholder"
      :maxlength="itemOption.maxlength || defaultMaxLength"
      :show-word-limit="itemOption.showWordLimit"
      :clearable="itemOption.clearable || true"
      :disabled="itemOption.disabled"
      v-bind="bindProps"
      style="width: 100%;"
      v-on="bindEvents"
    />

    <el-select
      v-if="isSelect"
      v-model.trim="currentVal"
      :placeholder="placeholder"
      :maxlength="itemOption.maxlength || defaultMaxLength"
      v-bind="bindProps"
      :clearable="itemOption.clearable"
      :disabled="itemOption.disabled"
      :filterable="itemOption.filterable || true"
      style="width: 100%;"
      v-on="bindEvents"
    >
      <el-option
        v-for="(option) in options"
        :key="`${option.randomId}`"
        :label="option.label"
        :value="option.value"
      />
    </el-select>

    <el-date-picker
      v-if="isDatePicker"
      v-model.trim="currentVal"
      type="date"
      :placeholder="placeholder"
      v-bind="bindProps"
      style="width: 100%"
      v-on="bindEvents"
    />

    <el-time-picker
      v-if="isTimePicker"
      v-model.trim="currentVal"
      :placeholder="placeholder"
      v-bind="bindProps"
      style="width: 100%;"
      v-on="bindEvents"
    />

    <el-switch
      v-if="isSwitch"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
    />

    <el-checkbox-group
      v-if="isCheckboxGroup"
      v-model="currentVal"
    >
      <el-checkbox
        v-for="(option, index) in options"
        :key="`${option.value}-${index}`"
        :label="option.value"
      />
    </el-checkbox-group>

    <el-radio-group
      v-if="isRadioGroup"
      v-model="currentVal"
      style="width: 100%;"
    >
      <el-radio
        v-for="(option, index) in options"
        :key="`${option.value}-${index}`"
        :label="option.value"
      >{{ option.label }}</el-radio>
    </el-radio-group>

    <el-date-picker
      v-if="isDateTimePicker"
      v-model="currentVal"
      type="datetime"
      :placeholder="placeholder"
      :clearable="itemOption.clearable"
      :picker-options="pickerOptions"
      style="width: 100%;"
      v-on="bindEvents"
    />

    <el-date-picker
      v-if="isDateTimeRangePicker"
      v-model="currentVal"
      type="daterange"
      :start-placeholder="itemOption.startPlaceholder"
      :end-placeholder="itemOption.endPlaceholder"
      :clearable="itemOption.clearable"
      :picker-options="pickerOptions"
      :format="itemOption.format"
      :value-format="itemOption.valueFormat"
      style="width: 100%;"
      v-on="bindEvents"
    />

    <el-date-picker
      v-if="isDateTimeRange"
      v-model="currentVal"
      type="datetimerange"
      :start-placeholder="itemOption.startPlaceholder"
      :end-placeholder="itemOption.endPlaceholder"
      :default-time="itemOption.defaultTime"
      :range-separator="itemOption.rangeSeparator"
      :format="itemOption.format"
      :value-format="itemOption.valueFormat"
      style="width: 100%;"
      :picker-options="itemOption.pickerOptions"
      v-on="bindEvents"
    />

  </div>
</template>

<script>
import { createUnionId } from '@/utils/tools'
export default {
  name: 'FormItem',
  components: {
  },
  props: {
    // eslint-disable-next-line vue/require-prop-types,vue/require-default-prop
    value: {},
    itemOption: {
      type: Object,
      default: () => {}
    },
    useI18n: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      defaultMaxLength: 32
    }
  },
  computed: {
    // 双向绑定数据值
    currentVal: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    // 绑定数据
    bindProps() {
      const obj = JSON.parse(JSON.stringify(this.itemOption))
      // 移除冗余属性
      if (obj.element === 'el-select' || obj.element === 'el-checkbox-group') {
        delete obj.options
      }
      delete obj.label
      delete obj.props
      delete obj.element
      delete obj.initialValue
      delete obj.rules
      delete obj.events
      delete obj.hide
      return obj
    },
    // 绑定方法
    bindEvents() {
      return this.itemOption.events || {}
    },
    placeholder() {
      return this.itemOption.placeholder
    },
    element() {
      return this.itemOption.element
    },
    options() {
      return this.itemOption.options.map(item => {
        return {
          ...item,
          randomId: createUnionId()
        }
      }) || []
    },
    type() {
      return this.itemOption.type || ''
    },
    prop() {
      return this.itemOption.prop
    },
    pickerOptions() {
      return this.itemOption.pickerOptions || {}
    },
    // el-select
    isSelect() {
      return this.element === 'el-select'
    },
    // el-input
    isInput() {
      return this.element === 'el-input'
    },
    // el-date-picker
    isDatePicker() {
      return this.element === 'el-date-picker' && !this.type
    },
    // el-time-picker
    isTimePicker() {
      return this.element === 'el-time-picker'
    },
    // el-date-time-picker
    isSwitch() {
      return this.element === 'el-switch'
    },
    // el-checkbox-group
    isCheckboxGroup() {
      return this.element === 'el-checkbox-group'
    },
    // el-radio-group
    isRadioGroup() {
      return this.element === 'el-radio-group'
    },
    // el-date-picker
    isDateTimePicker() {
      return this.element === 'el-date-picker' && this.type === 'datetime'
    },
    isDateTimeRangePicker() {
      return this.element === 'el-date-picker' && this.type === 'daterange'
    },
    // isDateTimeRange
    isDateTimeRange() {
      return this.element === 'el-date-picker' && this.type === 'datetimerange'
    }
  }
}
</script>

<style scoped>

</style>
